<template>
<div class="blog-list contain">
    <!-- <common-banner></common-banner> -->
    <div style="padding: 10px;background: #f8f8f9">
        <Card title="Options" icon="ios-options" :padding="0" shadow style="width: 300px;">
            <CellGroup>
                <Cell title="Selected" selected />
                <Cell title="With Badge" to="/components/badge">
                    <Badge :count="10" slot="extra" />
                </Cell>
                <Cell title="With Switch">
                    <Switch v-model="switchValue" slot="extra" />
                </Cell>
            </CellGroup>
        </Card>
    </div>
    <div class="blog-page">
      <Page :total="100" show-sizer />
    </div>
</div>
    
</template>

<script>

export default {
  name: 'BlogList',
  data () {
    return {
      switchValue: true
    }
  },
  created() {
    this.$store.state.isNavShow = true;
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="" type="text/css">
.ivu-page{
  text-align: center
}
</style>
